<template>
  <section class="screenfull" @click="toggleScreen">
    <svg-icon :name="state.isFullscreen ? 'screen-exit' : 'screen-full'" class="svg-size" />
  </section>
</template>
<script setup>
import screenfull from 'screenfull'
import { reactive, onBeforeMount, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'

const state = reactive({ isFullscreen: false })
function toggleScreen() {
  if (!screenfull.isEnabled) {
    ElMessage.warning('you browser can not work')
    return false
  }
  screenfull.toggle().then(() => {
    state.isFullscreen = screenfull.isFullscreen
  })

  return state.isFullscreen
}
function change() {
  state.isFullscreen = screenfull.isFullscreen
}
onBeforeMount(() => {
  if (screenfull.isEnabled) {
    screenfull.on('change', change())
  }
})
onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change())
  }
})
</script>

<style lang="scss" scoped>
.screenfull {
  line-height: 46px;
  height: 100%;
  cursor: pointer;
  transition: background 0.3s;
  transform: rotate(180deg);
  margin-right: 15px;
  float: right;
  .svg-size {
    width: 20px;
    height: 20px;
  }
}
</style>
